<template>
  <div class="asset-item">
    <div class="info-title">
      <i class="el-icon-magic-stick" style="float: left;"></i>
      <p style="margin-left: 10px; float: left;">{{ assetParam.label }}</p>
      <div style="clear: both;"></div> <!-- 清除浮动 -->
    </div>
    <div class="asset-icon">

      <svg-icon :icon-file-name="item1.assetName2" class="detailIcon contentTypeIcon"></svg-icon>
      <i class="placeholder-icon"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssetItem',
  props: {
    assetParam: {
      type: Object,
      required: true, // 确保传入的对象是必需的
      default: () => ({label: '默认标签'}) // 提供一个默认标签，以防未传入 label
    }
  },
  data() {
    return {
      // 可以在这里添加组件内部的状态
    };
  }
};
</script>

<style scoped>
.asset-item {
  margin-bottom: 20px; /* 每个资产项之间有一些间距 */
}

.info-title {
  width: 100%; /* 或者根据您的布局需求调整宽度 */
  overflow: hidden; /* 确保内容不会溢出容器 */
}

.asset-icon {
  text-align: center; /* 图标居中显示 */
  margin-top: 10px; /* 图标与标题之间有一些间距 */
}

.placeholder-icon {
  /* 这是一个占位图标的样式，您应该替换为实际的图标样式 */
  font-size: 24px; /* 图标大小 */
  color: #333; /* 图标颜色 */
}
</style>